import React from 'react';
import {FlatList, ListRenderItemInfo, StyleSheet} from 'react-native';
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '@/models/index';
import {IProgram} from '@/models/album';
import Item from './item';
const mapStateToProps = ({album}: RootState) => {
  return {
    list: album.list,
  };
};
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {
  onItemPress: (data: IProgram, index: number) => void;
}
const List: React.FC<IProps> = props => {
  const {list, onItemPress} = props;

  const onPress = (data: IProgram, index: number) => {
    // alert('节目', data);
    onItemPress(data, index);
  };

  const renderItem = ({item, index}: ListRenderItemInfo<IProgram>) => {
    // return <Text>{item.title}</Text>;
    return <Item data={item} index={index} key={item.id} onPress={onPress} />;
  };
  const keyExtractor = (item: IProgram) => {
    return item.id;
  };

  return (
    <FlatList
      style={styles.container}
      data={list}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFF',
  },
});

export default connector(List);
